<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>中国美食地图</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"/>
    <link rel="stylesheet" href="css/login.min.css"/>
</head>
<body>
<div class="login">
    <div class="message">中国美食地图管理平台登录</div>
    <div id="darkbannerwrap"></div>
    <form action="/login" method="post" id="loginForm">
        <h4 class="tip">${errorMsg!}</h4>
        <input placeholder="用户名" id="username" name="username" type="text" class="loginInput">
        <hr class="hr15">
        <input placeholder="密码" id="password" name="password" type="password" class="loginInput">
        <hr class="hr15">

        <input placeholder="验证码" id="imageCode" name="imageCode" type="text" class="codeInput loginInput">
        <img th:src="@{/captcha}" alt="" width="100" height="50" onclick="this.src=this.src+'?'">
        <hr class="hr15">

        <input value="登录" style="width: 100%;" type="button" id="loginBtn" onclick="login()">
        <hr class="hr20">
        <p class="copyright">
            版权所有 © 2019 www.goktech.cn
        </p>
    </form>
</div>
<script src="js/jquery.js"></script>
<script type="text/javascript">

    function login(){
       // alert($("#loginForm").serialize());
        $.ajax({
            type:"POST",//请求的类型
            dataType:"json",//服务器返回数据的类型
            url:"/login",
            data: $("#loginForm").serialize(),
            success: function (data){
                alert(data.msg);
                if(data.code==200){   // 登录成功，进入首页
                    //window.location.href="/toIndexPage";
                    console.log(data)
                }else { // 登录失败，跳转回登录页面
                    window.location.href="/toLoginPage";
                }
            }
        })
    }

</script>
</body>
</html>
